{{ template "head" .}}

<!--DataTables example-->
<div id="table-datatables">
    <h4 class="header">菜单列表 <a class="btn dropdown-button waves-effect waves-light " data-activates="dropdown1"
                               style="float:right">添加<i class="mdi-navigation-arrow-drop-down right"></i></a>

    </h4>

    <ul id="dropdown1" class="dropdown-content">
        <li><a href="#onemenu" class="waves-effect waves-light modal-trigger">一级菜单</a></li>
        <li><a href="#twomenu" class="waves-effect waves-light modal-trigger">二级菜单</a></li>
        <li><a href="#threemenu" class="waves-effect waves-light modal-trigger">三级菜单</a></li>
    </ul>


    <div class="row">
        <div class="col s12 m12 l12">
            <table id="data-table-simple" class="responsive-table display" cellspacing="0">

                <thead>
                <tr>
                    <th>菜单ID</th>
                    <th>菜单地址</th>
                    <th>菜单名称</th>
                    <th>菜单级别</th>
                    <th>创建时间</th>
                    <th>删除</th>
                </tr>
                </thead>

                <tbody>


                {{ range $k,$v :=$.MenuInfoAll}}
                <tr>
                    <td>{{$v.id}}</td>
                    <td>{{$v.menu_url}}</td>
                    <td title="{{$v.instruction}}">{{$v.menu_name}}</td>
                    {{ if eq $v.menu_grade "1"}}
                    <td>一级菜单</td>
                    {{ else if eq $v.menu_grade "2"}}
                    <td>二级菜单</td>
                    {{ else if eq $v.menu_grade "3"}}
                    <td>三级菜单</td>
                    {{ else }}
                    <td>未知</td>
                    {{ end }}
                    <td>{{$v.create_time}}</td>
                    <td onclick="sys_post_menu_del(this,{{$v.id}})">
                        <a a href="#" class="btn dropdown-button waves-effect waves-light ">删除</a>
                    </td>
                </tr>
                {{ end }}
                </tbody>
            </table>
        </div>
    </div>
</div>
<br>


</div>
<!-- Floating Action Button -->
<div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
    <a class="btn-floating btn-large">
        <i class="mdi-action-stars"></i>
    </a>
    <ul>
        <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a>
        </li>
        <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a>
        </li>
        <li><a href="app-calendar.html" class="btn-floating green"><i
                class="large mdi-editor-insert-invitation"></i></a></li>
        <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
    </ul>
</div>
<!-- Floating Action Button -->
</div>
<!--end container-->

</section>
<!-- END CONTENT -->


<div id="onemenu" class="modal">
    <form role="form">
        <div class="modal-content">
            <div class="row">
                <p>
                    <strong>添加一级菜单</strong>
                </p>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input type="text" name="menu_name" id="one_menu_name">
                    <label for="one_menu_name">菜单名称</label>
                </div>
            </div>

        </div>

        <div class="modal-footer">
            <a class="waves-effect waves-red btn-flat modal-action modal-close">关闭</a>
            <a type="submit" class="waves-effect waves-green btn-flat modal-action" onclick="sys_post_one_menu_add()">保存
            </a>
        </div>
    </form>
</div>


<div id="twomenu" class="modal">
    <form role="form">
        <div class="modal-content">
            <div class="row">
                <p>
                    <strong>添加二级菜单</strong>
                </p>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <input type="text" name="menu_name" id="two_menu_name">
                    <label for="two_menu_name">菜单名称</label>
                </div>

                <div class="input-field col s6">
                    <input type="text" name="menu_url" id="two_menu_url">
                    <label for="two_menu_url">菜单地址</label>
                </div>

                <div class="input-field col s6" style="display: none">
                    <input type="text" name="menu_grade" value="2" id="two_menu_grade">
                    <label for="two_menu_grade"></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <label></label>
                    <select name="superior_menu_id" id="two_superior_menu_id">
                        <option value="" disabled selected>选择一级菜单</option>
                        {{ range $k,$v :=$.MenuInfoAll}}
                        {{ if eq $v.menu_grade "1"}}
                        <option value="{{$v.id}}">{{$v.menu_name}}</option>
                        {{ end }}{{ end }}
                    </select>
                </div>

            </div>

        </div>

        <div class="modal-footer">
            <a class="waves-effect waves-red btn-flat modal-action modal-close">关闭</a>
            <a type="submit" class="waves-effect waves-green btn-flat modal-action" onclick="sys_post_two_menu_add()">保存
            </a>
        </div>
    </form>
</div>


<div id="threemenu" class="modal">
    <form role="form">
        <div class="modal-content">
            <div class="row">
                <p>
                    <strong>添加三级菜单</strong>
                </p>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <input type="text" name="menu_name" id="three_menu_name">
                    <label for="three_menu_name">菜单名称</label>
                </div>

                <div class="input-field col s6">
                    <input type="text" name="menu_url" id="three_menu_url">
                    <label for="three_menu_url">菜单地址</label>
                </div>

                <div class="input-field col s6" style="display: none">
                    <input type="text" name="menu_grade" value="3" id="three_menu_grade">
                    <label for="three_menu_grade"></label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <label></label>
                    <select name="superior_menu_id" id="three_superior_menu_id">
                        <option value="" disabled selected>选择二级菜单</option>
                        {{ range $k,$v :=$.MenuInfoAll}}
                        {{ if eq $v.menu_grade "2"}}
                        {{ range $k1,$v1 :=$.MenuInfoAll }} {{ if eq $v.superior_menu $v1.id}}
                        <option value="{{$v.id}}">{{$v1.menu_name}}/{{$v.menu_name}}</option>
                        {{ end }}{{ end }}{{ end }}{{ end }}
                    </select>
                </div>

            </div>


        </div>

        <div class="modal-footer">
            <a class="waves-effect waves-red btn-flat modal-action modal-close">关闭</a>
            <a type="submit" class="waves-effect waves-green btn-flat modal-action" onclick="sys_post_three_menu_add()">
                保存
            </a>
        </div>
    </form>
</div>


{{ template "foot" }}
<script type="text/javascript" src="/statics/js/function.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="/statics/js/plugins/jquery-1.11.2.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="/statics/js/materialize.min.js"></script>
<!--prism-->
<script type="text/javascript" src="/statics/js/plugins/prism/prism.js"></script>
<!--scrollbar-->
<!--sweetalert -->
<script type="text/javascript" src="/statics/js/plugins/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript" src="/statics/js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- data-tables -->
<script type="text/javascript" src="/statics/js/plugins/data-tables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/statics/js/plugins/data-tables/data-tables-script.js"></script>
<!-- chartist -->
<script type="text/javascript" src="/statics/js/plugins/chartist-js/chartist.min.js"></script>

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="/statics/js/plugins.min.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="/statics/js/custom-script.js"></script>
<script type="text/javascript">
    /*Show entries on click hide*/
    $(document).ready(function () {
        $(".dropdown-content.select-dropdown li").on("click", function () {
            var that = this;
            setTimeout(function () {
                if ($(that).parent().hasClass('active')) {
                    $(that).parent().removeClass('active');
                    $(that).parent().hide();
                }
            }, 100);
        });
    });
</script>
</body>

</html>